import React from "react";
import { Row, Col, Input, Menu } from "antd";
import { UnorderedListOutlined } from "@ant-design/icons";
import "./index.css";

const { SubMenu } = Menu;

export default function Header() {
  const handleClick = () => {};
  return (
    <header className="header">
      <Row>
        <Col>
          <h1 className="logo-container">
            <a id="logo" href="/">
              <img src="logo.svg" alt="logo" />
              Ant Design
            </a>
          </h1>
        </Col>
        <Col flex={1}>
          <div id="search-box">
            <Input placeholder="搜索" />
          </div>
        </Col>
        <Col>
          <Menu id="menu-container" onClick={handleClick} mode="horizontal">
            <Menu.Item key="design">设计</Menu.Item>
            <Menu.Item key="word">文档</Menu.Item>
            <Menu.Item key="component">组件</Menu.Item>
            <Menu.Item key="resource">资源</Menu.Item>
            <Menu.Item key="image">国内镜像</Menu.Item>
            <SubMenu key="SubMenu" icon={<UnorderedListOutlined />} title=" ">
              <Menu.Item key="Github">Github</Menu.Item>
              <Menu.Item key="English">English</Menu.Item>
              <Menu.Item key="RTL">RTL</Menu.Item>
              <Menu.Item key="charts">Ant Design Charts</Menu.Item>
              <Menu.Item key="pro">Ant Design Pro</Menu.Item>
              <Menu.Item key="proComps">Ant Design Pro Components</Menu.Item>
              <Menu.Item key="Angular">Ant Design of Angular</Menu.Item>
              <Menu.Item key="Vue">Ant Design of Vue</Menu.Item>
            </SubMenu>
          </Menu>
        </Col>
      </Row>
    </header>
  );
}
